
<template>
  <scroll-view @scrolltolower='handleToLower' scroll-y>
    <view class="recommend" v-if='recommends.length'>
      <view class="recommend-list">
        <navigator class="recommend-item" v-for="v in recommends" :key="v.id" :url='`/pages/album/index?id=${v.id}`'>
          <image :src='v.thumb' mode='widthFix' />
        </navigator>
      </view>
      <view class="monthes-wrap">
        <view class="monthes-title">
          <view class="left-text">
            {{monthes.DD}}/{{monthes.MM}}月
            <text class="monthes-text">你负责美丽就好</text>
          </view>
          <view class="right-more">更多></view>
        </view>
        <view class="monthes-content">
          <view class="monthes-item" v-for="(v,i) in monthes.items" :key="v.id">
            <go-details :list='monthes.items' :index='i'>
              <image mode="aspectFill" :src="v.thumb+v.rule.replace('$<Height>',300)" />
            </go-details>
          </view>
        </view>
      </view>
      <view class="hots-wrap">
        <view class="hots-title">
          <text class="hots-text">热门</text>
        </view>
        <view class="hots-content">
          <view class="hots-item" v-for="(v,i) in hots" :key="v.id">
            <go-details :list='hots' :index='i'>
              <image mode="aspectFill" :src="v.thumb" />
            </go-details>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import goDetails from '@/components/goDetails.vue'
import moment from 'moment'
export default {
  components: { goDetails },
  data() {
    return {
      hasMore: true,
      hots: [],
      recommends: [],
      monthes: {},
      params: {
        skip: 0,
        order: 'hots',
        limit: 30
      }
    }
  },
  mounted() {
    uni.setNavigationBarTitle({ title: '推荐' })
    this.loadList()
  },
  methods: {
    async loadList() {
      const { res } = await this.request({ url: '/image/v3/homepage/vertical', data: this.params })
      console.log(res)
      if (!this.recommends.length) {
        this.recommends = res.homepage[1].items
        this.monthes = res.homepage[2]
        this.monthes.MM = moment(this.monthes.stime).format('MM')
        this.monthes.DD = moment(this.monthes.stime).format('DD')
      } else if (!res.vertical.length) {
        this.hasMore = false
        uni.showToast({ title: '没有更多的数据了', icon: 'none' })
        return
      }
      this.hots.push(...res.vertical)
    },
    handleToLower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit
        this.loadList()
      } else {
        uni.showToast({ title: '没有更多的数据了', icon: 'none' })
      }
    }
  }
}
</script>

<style  lang='scss' scoped>
.recommend {
  height: calc(100vh - 36px);
}
.recommend-list {
  display: flex;
  flex-wrap: wrap;
  .recommend-item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}
.monthes-wrap {
  .monthes-title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    color: $color;
    font-size: 30rpx;
  }
  .left-text {
    font: 700;
  }
  .monthes-text {
    color: #666;
    margin-left: 30rpx;
    font-size: 34rpx;
  }
  .monthes-content {
    display: flex;
    flex-wrap: wrap;
  }
  .monthes-item {
    width: 33.33%;
    border: 5rpx solid #fff;
  }
}
.hots-wrap {
  .hots-title {
    padding: 20rpx;
  }
  .hots-text {
    color: $color;
    padding: 0 20rpx;
    border-left: 20rpx solid $color;
  }
  .hots-content {
    display: flex;
    flex-wrap: wrap;
  }
  .hots-item {
    width: 33.33%;
    border: 5rpx solid #fff;
  }
}
</style>